<!doctype html>
<html lang="zh-CN">
<head>

    <meta charset="utf-8">
    <meta name="generator" content="Hugo 0.74.1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>flutter Form 表单组件的初步解析 | caijinglong的博客</title>
    <meta property="og:title" content="flutter Form 表单组件的初步解析 - caijinglong的博客">
    <meta property="og:type" content="article">
        
    <meta property="article:published_time" content="2019-07-22T15:16:45&#43;08:00">
        
        
    <meta property="article:modified_time" content="2019-07-22T15:16:45&#43;08:00">
        
    <meta name="Keywords" content="golang,go语言,flutter,caijinglong,java,android,博客,项目管理,python,软件架构,公众号,小程序">
    <meta name="description" content="flutter Form 表单组件的初步解析">
        
    <meta name="author" content="caijinglong">
    <meta property="og:url" content="http://www.kikt.top/posts/flutter/form/form1/">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

    <link rel="stylesheet" href="/css/normalize.css">
    
        <link rel="stylesheet" href="/css/prism.css">
    
    <link rel="stylesheet" href="/css/style.css">
    <script type="text/javascript" src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    

   
    <script>
        (function(){
            var bp = document.createElement('script');
            var curProtocol = window.location.protocol.split(':')[0];
            if (curProtocol === 'https') {
                bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
            }
            else {
                bp.src = 'http://push.zhanzhang.baidu.com/push.js';
            }
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(bp, s);
        })();
    </script>

    
    
</head>

<body>
<header id="header" class="clearfix">
    <div class="container">
        <div class="col-group">
            <div class="site-name ">
                
                    <a id="logo" href="http://www.kikt.top">
                        caijinglong的博客
                    </a>
                
                <p class="description">Android/Flutter开发者，对于golang/python/ios/java 均有所了解</p>
            </div>
            <div>
                <nav id="nav-menu" class="clearfix">
                    <a class="" href="http://www.kikt.top">首页</a>
                    
                    <a  href="http://www.kikt.top/archives/" title="归档">归档</a>
                    
                    <a  href="http://www.kikt.top/contact/" title="接单">接单</a>
                    
                    <a  href="http://www.kikt.top/about/" title="关于">关于</a>
                    
                </nav>
            </div>
        </div>
    </div>
</header>


<div id="body">
    <div class="container">
        <div class="col-group">

            <div class="col-8" id="main">
                <div class="res-cons">
                    <article class="post">
                        <header>
                            <h1 class="post-title">flutter Form 表单组件的初步解析</h1>
                        </header>
                        <date class="post-meta meta-date">
                            2019年7月22日
                        </date>
                        
                        <div class="post-meta meta-category">
                            |
                            
                                <a href="http://www.kikt.top/categories/flutter">flutter</a>
                            
                        </div>
                        
                        
                        <div class="post-meta">
                            <span id="busuanzi_container_page_pv">|<span id="busuanzi_value_page_pv"></span><span> 阅读</span></span>
                        </div>
                        
                        <div class="post-content">
                            <p>在一个正常的应用程序中, 表单是用户交互的很重要的一部分</p>
<p>flutter 中你可以自己&quot;绑定&quot;用户的输入数据和 state 中的字段</p>
<p>当然, 还有另一个选择, Flutter 内置了 <code>Form</code> 组件给我们使用, 这个组件是 flutter 框架提供出来帮助我们操作表单的一个组件, 应该是官方较为推荐的方案</p>
<p>不过 <code>Form</code> 的相关中文文章不太多, 基本都是介绍一下 <code>TextFormField</code> 的使用, 更多的 api 云里雾里的, 可能有些朋友不太好理解<br>
我粗略的解析下源码和自定义, 帮助看过的朋友理解下 <code>Form</code> 体系</p>
<ul>
<li><a href="#form-%e4%bd%93%e7%b3%bb%e7%9a%84%e7%ae%80%e5%8d%95%e4%bd%bf%e7%94%a8">Form 体系的简单使用</a>
<ul>
<li><a href="#%e8%87%aa%e5%8a%a8%e6%a0%a1%e9%aa%8c">自动校验</a></li>
<li><a href="#%e7%82%b9%e5%87%bb%e5%90%8e%e6%a0%a1%e9%aa%8c">点击后校验</a></li>
</ul>
</li>
<li><a href="#form-%e4%bd%93%e7%b3%bb%e6%ba%90%e7%a0%81">Form 体系源码</a>
<ul>
<li><a href="#%e6%9e%b6%e6%9e%84%e6%9f%a5%e7%9c%8b">架构查看</a></li>
<li><a href="#%e6%ba%90%e7%a0%81%e8%a7%a3%e6%9e%90">源码解析</a>
<ul>
<li><a href="#form-%e8%a7%a3%e6%9e%90">Form 解析</a></li>
<li><a href="#formstate-%e8%a7%a3%e6%9e%90">FormState 解析</a></li>
<li><a href="#formfield-%e8%a7%a3%e6%9e%90">FormField 解析</a></li>
<li><a href="#formfieldstate-%e8%a7%a3%e6%9e%90">FormFieldState 解析</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#%e8%87%aa%e5%ae%9a%e4%b9%89-form-%e5%ad%90%e7%bb%84%e4%bb%b6">自定义 Form 子组件</a>
<ul>
<li><a href="#%e8%87%aa%e5%ae%9a%e4%b9%89-checkboxformfield">自定义 CheckboxFormField</a></li>
<li><a href="#%e8%87%aa%e5%ae%9a%e4%b9%89-sliderformfield">自定义 SliderFormField</a></li>
</ul>
</li>
<li><a href="#%e5%90%8e%e8%ae%b0">后记</a></li>
</ul>
<h2 id="form-体系的简单使用">Form 体系的简单使用</h2>
<h3 id="自动校验">自动校验</h3>
<p>官方提供给了我们一些组件来结合 <code>Form</code> 使用, 最常见的就是 <code>TextFormField</code></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart"><span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;package:flutter/material.dart&#39;</span>;

<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">SimpleUseComponent</span> <span style="color:#66d9ef">extends</span> StatefulWidget {
  <span style="color:#960050;background-color:#1e0010">@</span>override
  _SimpleUseComponentState createState() <span style="color:#f92672">=&gt;</span> _SimpleUseComponentState();
}

<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">_SimpleUseComponentState</span> <span style="color:#66d9ef">extends</span> State<span style="color:#f92672">&lt;</span>SimpleUseComponent<span style="color:#f92672">&gt;</span> {
  <span style="color:#960050;background-color:#1e0010">@</span>override
  Widget build(BuildContext context) {
    <span style="color:#66d9ef">return</span> Form(
      onChanged: () {
        print(<span style="color:#e6db74">&#34;form change&#34;</span>);
      },
      child: Column(
        children: <span style="color:#f92672">&lt;</span>Widget<span style="color:#f92672">&gt;</span>[
          TextFormField(
            initialValue: <span style="color:#e6db74">&#34;你好&#34;</span>,
            validator: (value) {
              <span style="color:#66d9ef">if</span> (value.isEmpty) <span style="color:#66d9ef">return</span> <span style="color:#e6db74">&#34;不能为空&#34;</span>;
              <span style="color:#66d9ef">return</span> <span style="color:#66d9ef">null</span>;
            },
            autovalidate: <span style="color:#66d9ef">true</span>,
          ),
        ],
      ),
    );
  }
}

</code></pre></div><p>当我输入/删除时, 会出现日志: &lsquo;form change&rsquo;</p>
<p><img src="https://dev.azure.com/cjlspy/844861b8-ee45-48a3-b430-b974684baaaa/_apis/git/repositories/bf4da1c1-1cfa-4f54-8a75-745cce2b737c/items?versionDescriptor%5Bversion%5D=master&amp;path=%2F20190722153013.png&amp;versionDescriptor%5BversionOptions%5D=0&amp;versionDescriptor%5BversionType%5D=0&amp;resolveLfs=true&amp;%24format=octetStream&amp;api-version=5.0" alt="20190722153013.png">
有一个<code>autovalidate</code>的属性, 这个属性可以在<code>TextFormField</code>设置,也可以在<code>Form</code>设置, 自动提交验证的意思, 默认是 <code>false</code>.<br>
当我将所有字符都删除时, 会出现&rsquo;不能为空&rsquo;的提示. 这个是由 <code>validator</code> 实现的, 因为我设置了<code>autovalidate</code>为 <code>true</code>, 然后这个返回值如果是 <code>null</code>, 则说明验证通过, 不通过则返回不通过的字符串.</p>
<h3 id="点击后校验">点击后校验</h3>
<p>当然,有些表单不要求自动校验, 可能是点击某个按钮后来校验, 这种情况下, 就需要使用 <code>Form.of</code> 来获取到表单状态</p>
<p>话不多说, 代码在下面:</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart">
<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">SimpleUseClickComponent</span> <span style="color:#66d9ef">extends</span> StatefulWidget {
  <span style="color:#960050;background-color:#1e0010">@</span>override
  _SimpleUseClickComponentState createState() <span style="color:#f92672">=&gt;</span>
      _SimpleUseClickComponentState();
}

<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">_SimpleUseClickComponentState</span> <span style="color:#66d9ef">extends</span> State<span style="color:#f92672">&lt;</span>SimpleUseClickComponent<span style="color:#f92672">&gt;</span> {
  <span style="color:#960050;background-color:#1e0010">@</span>override
  Widget build(BuildContext context) {
    <span style="color:#66d9ef">return</span> Form(
      onChanged: () {
        print(<span style="color:#e6db74">&#34;form change&#34;</span>);
      },
      child: Column(
        children: <span style="color:#f92672">&lt;</span>Widget<span style="color:#f92672">&gt;</span>[
          TextFormField(
            validator: (value) {
              <span style="color:#66d9ef">if</span> (value.isEmpty) <span style="color:#66d9ef">return</span> <span style="color:#e6db74">&#34;不能为空&#34;</span>;
              <span style="color:#66d9ef">return</span> <span style="color:#66d9ef">null</span>;
            },
          ),
          Builder( <span style="color:#75715e">// 这个 Builder 是
</span><span style="color:#75715e"></span>            builder: (ctx) <span style="color:#f92672">=&gt;</span> RaisedButton(
              child: Text(<span style="color:#e6db74">&#39;check&#39;</span>),
              onPressed: () {
                <span style="color:#66d9ef">final</span> formState <span style="color:#f92672">=</span> Form.of(ctx);
                formState.validate(); <span style="color:#75715e">// 验证
</span><span style="color:#75715e"></span>                <span style="color:#75715e">// formState.reset(); // 重置
</span><span style="color:#75715e"></span>                <span style="color:#75715e">// formState.save(); // 保存
</span><span style="color:#75715e"></span>              },
            ),
          ),
        ],
      ),
    );
  }
}
</code></pre></div><p><code>validate</code> 会触发 <code>FormState</code> 的 <code>validation</code> 回调</p>
<p><code>reset</code> 会触发 <code>FormFieldState</code> 的 <code>reset</code> 回调, 默认实现是将输入框设置为初始值</p>
<p><code>save</code> 会触发 <code>FormFieldState</code> 的 <code>save</code> 回调, 可以在里面写一些逻辑(比如保存信息到数据库等等)</p>
<h2 id="form-体系源码">Form 体系源码</h2>
<h3 id="架构查看">架构查看</h3>
<p><code>Form</code> 组件是 widgets 包内的的一个 <code>Widget</code>, 不是 <code>Material</code> 和 <code>Cupertino</code> 包内的, 它没有用户界面, 更多的是逻辑层面的一个组件</p>
<p><img src="https://dev.azure.com/cjlspy/844861b8-ee45-48a3-b430-b974684baaaa/_apis/git/repositories/bf4da1c1-1cfa-4f54-8a75-745cce2b737c/items?versionDescriptor%5Bversion%5D=master&amp;path=%2F20190722152219.png&amp;versionDescriptor%5BversionOptions%5D=0&amp;versionDescriptor%5BversionType%5D=0&amp;resolveLfs=true&amp;%24format=octetStream&amp;api-version=5.0" alt="20190722152219.png"></p>
<p><img src="https://dev.azure.com/cjlspy/844861b8-ee45-48a3-b430-b974684baaaa/_apis/git/repositories/bf4da1c1-1cfa-4f54-8a75-745cce2b737c/items?versionDescriptor%5Bversion%5D=master&amp;path=%2F20190722152305.png&amp;versionDescriptor%5BversionOptions%5D=0&amp;versionDescriptor%5BversionType%5D=0&amp;resolveLfs=true&amp;%24format=octetStream&amp;api-version=5.0" alt="20190722152305.png"></p>
<p><code>Form</code> 体系中有 5 个类, 3 个 <code>typedef</code> 组成</p>
<p><code>FormScope</code> 是一个<code>InheritedWidget</code>, 一般带<code>of</code>方法的组件都会对应一个这个东西, 是获取 <code>Form</code> 中 <code>FormState</code> 的容器类</p>
<p><code>FormState</code> 就是 <code>Form</code> 对应的 state</p>
<p><code>FormField</code>是<code>Form</code>下的子组件的通用类, 每个实现/继承了这个类的子类就可以被<code>Form</code>管理, 比如 <code>TextFieldForm</code> 就是这么一个组件</p>
<p><img src="https://dev.azure.com/cjlspy/844861b8-ee45-48a3-b430-b974684baaaa/_apis/git/repositories/bf4da1c1-1cfa-4f54-8a75-745cce2b737c/items?versionDescriptor%5Bversion%5D=master&amp;path=%2F20190722161208.png&amp;versionDescriptor%5BversionOptions%5D=0&amp;versionDescriptor%5BversionType%5D=0&amp;resolveLfs=true&amp;%24format=octetStream&amp;api-version=5.0" alt="20190722161208.png"></p>
<p><code>FormFieldState</code> 是 <code>FormField</code> 对应的状态, 其中包含了一些状态信息</p>
<h3 id="源码解析">源码解析</h3>
<p>通过回调等手段实现了内部的交互, 详细看截图</p>
<h4 id="form-解析">Form 解析</h4>
<p><img src="https://dev.azure.com/cjlspy/844861b8-ee45-48a3-b430-b974684baaaa/_apis/git/repositories/bf4da1c1-1cfa-4f54-8a75-745cce2b737c/items?versionDescriptor%5Bversion%5D=master&amp;path=%2F2019-07-22-at-17.02.png&amp;versionDescriptor%5BversionOptions%5D=0&amp;versionDescriptor%5BversionType%5D=0&amp;resolveLfs=true&amp;%24format=octetStream&amp;api-version=5.0" alt="2019-07-22 at 17.02.png"></p>
<h4 id="formstate-解析">FormState 解析</h4>
<p><img src="https://dev.azure.com/cjlspy/844861b8-ee45-48a3-b430-b974684baaaa/_apis/git/repositories/bf4da1c1-1cfa-4f54-8a75-745cce2b737c/items?versionDescriptor%5Bversion%5D=master&amp;path=%2F2019-07-22-at-17.06.png&amp;versionDescriptor%5BversionOptions%5D=0&amp;versionDescriptor%5BversionType%5D=0&amp;resolveLfs=true&amp;%24format=octetStream&amp;api-version=5.0" alt="2019-07-22 at 17.06.png"></p>
<h4 id="formfield-解析">FormField 解析</h4>
<p><img src="https://dev.azure.com/cjlspy/844861b8-ee45-48a3-b430-b974684baaaa/_apis/git/repositories/bf4da1c1-1cfa-4f54-8a75-745cce2b737c/items?versionDescriptor%5Bversion%5D=master&amp;path=%2F2019-07-22-at-17.10.png&amp;versionDescriptor%5BversionOptions%5D=0&amp;versionDescriptor%5BversionType%5D=0&amp;resolveLfs=true&amp;%24format=octetStream&amp;api-version=5.0" alt="2019-07-22 at 17.10.png"></p>
<h4 id="formfieldstate-解析">FormFieldState 解析</h4>
<p><img src="https://dev.azure.com/cjlspy/844861b8-ee45-48a3-b430-b974684baaaa/_apis/git/repositories/bf4da1c1-1cfa-4f54-8a75-745cce2b737c/items?versionDescriptor%5Bversion%5D=master&amp;path=%2F2019-07-22-at-16.56.png&amp;versionDescriptor%5BversionOptions%5D=0&amp;versionDescriptor%5BversionType%5D=0&amp;resolveLfs=true&amp;%24format=octetStream&amp;api-version=5.0" alt="2019-07-22 at 16.56.png"></p>
<h2 id="自定义-form-子组件">自定义 Form 子组件</h2>
<p>有的时候表单中并不只有文本输入, 还会有 <code>Checkbox</code> 等组件, 我这里举两个例子来自定义一个 <code>Form</code> 子组件</p>
<h3 id="自定义-checkboxformfield">自定义 CheckboxFormField</h3>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart"><span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;package:flutter/material.dart&#39;</span>;

<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">CheckboxFormField</span> <span style="color:#66d9ef">extends</span> FormField<span style="color:#f92672">&lt;</span><span style="color:#66d9ef">bool</span><span style="color:#f92672">&gt;</span> {
  CheckboxFormField({
    <span style="color:#66d9ef">bool</span> initValue,
  }) <span style="color:#f92672">:</span> <span style="color:#66d9ef">super</span>(
          builder: CheckboxFormField.buildWidget,
          initialValue: initValue,
        );

  <span style="color:#66d9ef">static</span> Widget buildWidget(FormFieldState<span style="color:#f92672">&lt;</span><span style="color:#66d9ef">bool</span><span style="color:#f92672">&gt;</span> field) {
    <span style="color:#66d9ef">return</span> Checkbox(
      onChanged: (<span style="color:#66d9ef">bool</span> value) {
        field.didChange(value);
      },
      value: field.value,
    );
  }
}

</code></pre></div><p>一个简单的自定义 <code>CheckboxFormField</code> 就完成了</p>
<p>置入 <code>Form</code> 中</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart"><span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;package:flutter/material.dart&#39;</span>;

<span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;custom_field.dart&#39;</span>;

<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">FormComponent</span> <span style="color:#66d9ef">extends</span> StatefulWidget {
  <span style="color:#960050;background-color:#1e0010">@</span>override
  _FormComponentState createState() <span style="color:#f92672">=&gt;</span> _FormComponentState();
}

<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">_FormComponentState</span> <span style="color:#66d9ef">extends</span> State<span style="color:#f92672">&lt;</span>FormComponent<span style="color:#f92672">&gt;</span> {
  <span style="color:#960050;background-color:#1e0010">@</span>override
  Widget build(BuildContext context) {
    <span style="color:#66d9ef">return</span> Form(
      onChanged: () {
        print(<span style="color:#e6db74">&#34;on change&#34;</span>);
      },
      child: ListView(
        children: <span style="color:#f92672">&lt;</span>Widget<span style="color:#f92672">&gt;</span>[
          CheckboxFormField(),
        ],
      ),
    );
  }
}
</code></pre></div><p>当我点击时, 就会回调 on change</p>
<h3 id="自定义-sliderformfield">自定义 SliderFormField</h3>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart"><span style="color:#66d9ef">class</span> <span style="color:#a6e22e">SliderFormField</span> <span style="color:#66d9ef">extends</span> FormField<span style="color:#f92672">&lt;</span><span style="color:#66d9ef">double</span><span style="color:#f92672">&gt;</span> {
  SliderFormField()
      <span style="color:#f92672">:</span> <span style="color:#66d9ef">super</span>(
          builder: SliderFormField.buildWidget,
          initialValue: <span style="color:#ae81ff">50</span>,
        );

  <span style="color:#66d9ef">static</span> Widget buildWidget(FormFieldState<span style="color:#f92672">&lt;</span><span style="color:#66d9ef">double</span><span style="color:#f92672">&gt;</span> field) {
    <span style="color:#66d9ef">return</span> Slider(
      onChanged: (<span style="color:#66d9ef">double</span> value) {
        field.didChange(value);
      },
      value: field.value,
      min: <span style="color:#ae81ff">0</span>,
      max: <span style="color:#ae81ff">100</span>,
      divisions: <span style="color:#ae81ff">100</span>,
    );
  }
}
</code></pre></div><p>置入 Form 中</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart"><span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;package:flutter/material.dart&#39;</span>;

<span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;custom_field.dart&#39;</span>;

<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">FormComponent</span> <span style="color:#66d9ef">extends</span> StatefulWidget {
  <span style="color:#960050;background-color:#1e0010">@</span>override
  _FormComponentState createState() <span style="color:#f92672">=&gt;</span> _FormComponentState();
}

<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">_FormComponentState</span> <span style="color:#66d9ef">extends</span> State<span style="color:#f92672">&lt;</span>FormComponent<span style="color:#f92672">&gt;</span> {
  GlobalKey<span style="color:#f92672">&lt;</span>FormState<span style="color:#f92672">&gt;</span> formKey <span style="color:#f92672">=</span> GlobalKey();

  <span style="color:#960050;background-color:#1e0010">@</span>override
  Widget build(BuildContext context) {
    <span style="color:#66d9ef">return</span> Form(
      key: formKey,
      onChanged: () {
        print(<span style="color:#e6db74">&#34;on change&#34;</span>);
      },
      child: ListView(
        children: <span style="color:#f92672">&lt;</span>Widget<span style="color:#f92672">&gt;</span>[
          CheckboxFormField(),
          SliderFormField(),
          RaisedButton(
            onPressed: () {
              formKey.currentState.reset();
            },
            child: Text(<span style="color:#e6db74">&#34;reset&#34;</span>),
          ),
        ],
      ),
    );
  }
}
</code></pre></div><p>加入了一个<code>Key</code>用于获取<code>FormState</code>, 触发<code>reset</code>方法</p>
<p>截图:</p>
<p><img src="https://dev.azure.com/cjlspy/844861b8-ee45-48a3-b430-b974684baaaa/_apis/git/repositories/bf4da1c1-1cfa-4f54-8a75-745cce2b737c/items?versionDescriptor%5Bversion%5D=master&amp;path=%2FKapture-2019-07-22-at-17.25.30.gif&amp;versionDescriptor%5BversionOptions%5D=0&amp;versionDescriptor%5BversionType%5D=0&amp;resolveLfs=true&amp;%24format=octetStream&amp;api-version=5.0" alt="Kapture 2019-07-22 at 17.25.30.gif"></p>
<h2 id="后记">后记</h2>
<p>本篇解析了一下 Form 的使用和源码, 帮助朋友们更好的理解使用</p>
<p><a href="https://github.com/CaiJingLong/flutter_form_example">项目仓库</a></p>
<p>以上</p>

                        </div>

                        

<div class="post-archive">
    <h2>See Also</h2>
    <ul class="listing">
        
        <li><a href="/posts/flutter/dart/generators/">dart中的生成器函数</a></li>
        
        <li><a href="/posts/flutter/desktop/go-desktop-engine/flutter-go-desktop-2/">Go Flutter Desktop (二) go 二进制程序打包为 mac app(dmg)</a></li>
        
        <li><a href="/posts/flutter/desktop/go-desktop-engine/flutter-go-desktop-1/">Go Flutter Desktop (一) 初探</a></li>
        
        <li><a href="/posts/flutter/exists/add-flutter-to-ios/">把flutter作为framework添加到已存在的iOS中</a></li>
        
        <li><a href="/posts/flutter/exists/android-as-aar-to-maven/">把flutter项目作为aar添加到已有的Android工程上</a></li>
        
    </ul>
</div>


                        <div class="post-meta meta-tags">
                            
                            <ul class="clearfix">
                                
                                <li><a href="http://www.kikt.top/tags/flutter">flutter</a></li>
                                
                                <li><a href="http://www.kikt.top/tags/form">form</a></li>
                                
                                <li><a href="http://www.kikt.top/tags/%E8%A1%A8%E5%8D%95">表单</a></li>
                                
                            </ul>
                            
                        </div>
                    </article>
                    
    

    
    
    <div class="post bg-white">
      <script src="https://utteranc.es/client.js"
            repo= "caijinglong/kikt-blog-comment"
            issue-term="pathname"
            theme="github-light"
            crossorigin="anonymous"
            async>
      </script>
    </div>
    
                </div>
            </div>
            <div id="secondary">
    <section class="widget">
        <form id="search" action="//www.google.com/search" method="get" accept-charset="utf-8" target="_blank" _lpchecked="1">
      
      <input type="text" name="q" maxlength="20" placeholder="Search">
      <input type="hidden" name="sitesearch" value="http://www.kikt.top">
      <button type="submit" class="submit icon-search"></button>
</form>
    </section>
    
    <section class="widget">
        <h3 class="widget-title">最近文章</h3>
<ul class="widget-list">
    
    <li>
        <a href="http://www.kikt.top/posts/java/crack/crack1/" title="使用javassist,修改jar包方法实现">使用javassist,修改jar包方法实现</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/posts/github/actions/create/" title="Github action 的开发到发布">Github action 的开发到发布</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/posts/flutter/jenkins&#43;fastlane/" title="flutter Jenkins&#43;fastlane 自动化打测试包, 并上传蒲公英">flutter Jenkins&#43;fastlane 自动化打测试包, 并上传蒲公英</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/posts/go/compile-for-android/" title="编译 go 源码为 android 动态库(so)">编译 go 源码为 android 动态库(so)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/posts/flutter/focusnode-2/" title="Flutter FocusNode 焦点那点事-(二)">Flutter FocusNode 焦点那点事-(二)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/posts/flutter/focusnode-1/" title="Flutter FocusNode 焦点那点事-(一)">Flutter FocusNode 焦点那点事-(一)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/posts/server/caddy/cros_for_local_dev/" title="用 Caddy 解决 web 开发中本地跨域的问题">用 Caddy 解决 web 开发中本地跨域的问题</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/posts/flutter/route/navigator-helper2/" title="Navigator Helper2">Navigator Helper2</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/posts/flutter/grey-app/" title="flutter 怎么实现app整体灰度">flutter 怎么实现app整体灰度</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/posts/flutter/plugin/flutter-sdk-import-aar/" title="Flutter 插件开发之引入aar到安卓部分 并使用本地maven">Flutter 插件开发之引入aar到安卓部分 并使用本地maven</a>
    </li>
    
</ul>
    </section>

    

    <section class="widget">
        <h3 class="widget-title">分类</h3>
<ul class="widget-list">
    
    <li>
        <a href="http://www.kikt.top/categories/android/">android(25)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/caddy/">caddy(1)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/dart/">dart(5)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/docker/">docker(3)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/flutter/">flutter(60)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/github/">github(3)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/go/">go(1)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/golang/">golang(1)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/iOS/">iOS(6)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/ios/">ios(1)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/java/">java(6)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/jetbrains/">jetbrains(1)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/other/">other(3)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/python/">python(1)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/server/">server(5)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/spring/">spring(3)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/tools/">tools(1)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/%E6%9D%82%E9%A1%B9/">杂项(1)</a>
    </li>
    
    <li>
        <a href="http://www.kikt.top/categories/%E6%B6%82%E9%B8%A6/">涂鸦(1)</a>
    </li>
    
</ul>
    </section>

    <section class="widget">
        <h3 class="widget-title">标签</h3>
<div class="tagcloud">
    
    <a href="http://www.kikt.top/tags/10/">10</a>
    
    <a href="http://www.kikt.top/tags/2.3/">2.3</a>
    
    <a href="http://www.kikt.top/tags/Clipboard/">Clipboard</a>
    
    <a href="http://www.kikt.top/tags/Javassist/">Javassist</a>
    
    <a href="http://www.kikt.top/tags/Migrate/">Migrate</a>
    
    <a href="http://www.kikt.top/tags/aar/">aar</a>
    
    <a href="http://www.kikt.top/tags/actions/">actions</a>
    
    <a href="http://www.kikt.top/tags/aidl/">aidl</a>
    
    <a href="http://www.kikt.top/tags/android/">android</a>
    
    <a href="http://www.kikt.top/tags/androidQ/">androidQ</a>
    
    <a href="http://www.kikt.top/tags/androidX/">androidX</a>
    
    <a href="http://www.kikt.top/tags/apk/">apk</a>
    
    <a href="http://www.kikt.top/tags/app/">app</a>
    
    <a href="http://www.kikt.top/tags/appcode/">appcode</a>
    
    <a href="http://www.kikt.top/tags/azure/">azure</a>
    
    <a href="http://www.kikt.top/tags/ble/">ble</a>
    
    <a href="http://www.kikt.top/tags/bottomsheet/">bottomsheet</a>
    
    <a href="http://www.kikt.top/tags/butterknife/">butterknife</a>
    
    <a href="http://www.kikt.top/tags/c/">c</a>
    
    <a href="http://www.kikt.top/tags/caddy/">caddy</a>
    
    <a href="http://www.kikt.top/tags/camera/">camera</a>
    
    <a href="http://www.kikt.top/tags/cameraX/">cameraX</a>
    
    <a href="http://www.kikt.top/tags/channel/">channel</a>
    
    <a href="http://www.kikt.top/tags/cocoapods/">cocoapods</a>
    
    <a href="http://www.kikt.top/tags/cupertino/">cupertino</a>
    
    <a href="http://www.kikt.top/tags/dart/">dart</a>
    
    <a href="http://www.kikt.top/tags/dart-2.6/">dart-2.6</a>
    
    <a href="http://www.kikt.top/tags/desktop/">desktop</a>
    
    <a href="http://www.kikt.top/tags/dialog/">dialog</a>
    
    <a href="http://www.kikt.top/tags/dmg/">dmg</a>
    
    <a href="http://www.kikt.top/tags/doc/">doc</a>
    
    <a href="http://www.kikt.top/tags/docker/">docker</a>
    
    <a href="http://www.kikt.top/tags/docker-compose/">docker-compose</a>
    
    <a href="http://www.kikt.top/tags/excel/">excel</a>
    
    <a href="http://www.kikt.top/tags/exists/">exists</a>
    
    <a href="http://www.kikt.top/tags/faq/">faq</a>
    
    <a href="http://www.kikt.top/tags/fastlane/">fastlane</a>
    
    <a href="http://www.kikt.top/tags/ffi/">ffi</a>
    
    <a href="http://www.kikt.top/tags/ffmpeg/">ffmpeg</a>
    
    <a href="http://www.kikt.top/tags/flexmark/">flexmark</a>
    
    <a href="http://www.kikt.top/tags/flutter/">flutter</a>
    
    <a href="http://www.kikt.top/tags/flutter-web/">flutter-web</a>
    
    <a href="http://www.kikt.top/tags/focus/">focus</a>
    
    <a href="http://www.kikt.top/tags/focusNode/">focusNode</a>
    
    <a href="http://www.kikt.top/tags/form/">form</a>
    
    <a href="http://www.kikt.top/tags/framework/">framework</a>
    
    <a href="http://www.kikt.top/tags/github/">github</a>
    
    <a href="http://www.kikt.top/tags/go/">go</a>
    
    <a href="http://www.kikt.top/tags/golang/">golang</a>
    
    <a href="http://www.kikt.top/tags/gradle/">gradle</a>
    
    <a href="http://www.kikt.top/tags/http/">http</a>
    
    <a href="http://www.kikt.top/tags/iOS/">iOS</a>
    
    <a href="http://www.kikt.top/tags/ide/">ide</a>
    
    <a href="http://www.kikt.top/tags/idea/">idea</a>
    
    <a href="http://www.kikt.top/tags/index/">index</a>
    
    <a href="http://www.kikt.top/tags/inside/">inside</a>
    
    <a href="http://www.kikt.top/tags/ios/">ios</a>
    
    <a href="http://www.kikt.top/tags/java/">java</a>
    
    <a href="http://www.kikt.top/tags/jenkins/">jenkins</a>
    
    <a href="http://www.kikt.top/tags/jetbrains/">jetbrains</a>
    
    <a href="http://www.kikt.top/tags/jsdelivr/">jsdelivr</a>
    
    <a href="http://www.kikt.top/tags/json/">json</a>
    
    <a href="http://www.kikt.top/tags/json_serializable/">json_serializable</a>
    
    <a href="http://www.kikt.top/tags/junit/">junit</a>
    
    <a href="http://www.kikt.top/tags/library/">library</a>
    
    <a href="http://www.kikt.top/tags/live-template/">live-template</a>
    
    <a href="http://www.kikt.top/tags/loadmore/">loadmore</a>
    
    <a href="http://www.kikt.top/tags/log/">log</a>
    
    <a href="http://www.kikt.top/tags/mac/">mac</a>
    
    <a href="http://www.kikt.top/tags/macos/">macos</a>
    
    <a href="http://www.kikt.top/tags/maven/">maven</a>
    
    <a href="http://www.kikt.top/tags/mysql/">mysql</a>
    
    <a href="http://www.kikt.top/tags/navigationbar/">navigationbar</a>
    
    <a href="http://www.kikt.top/tags/navigator/">navigator</a>
    
    <a href="http://www.kikt.top/tags/ndk/">ndk</a>
    
    <a href="http://www.kikt.top/tags/nginx/">nginx</a>
    
    <a href="http://www.kikt.top/tags/oc/">oc</a>
    
    <a href="http://www.kikt.top/tags/opencv/">opencv</a>
    
    <a href="http://www.kikt.top/tags/poi/">poi</a>
    
    <a href="http://www.kikt.top/tags/pub/">pub</a>
    
    <a href="http://www.kikt.top/tags/python/">python</a>
    
    <a href="http://www.kikt.top/tags/retrofit/">retrofit</a>
    
    <a href="http://www.kikt.top/tags/route/">route</a>
    
    <a href="http://www.kikt.top/tags/server/">server</a>
    
    <a href="http://www.kikt.top/tags/so/">so</a>
    
    <a href="http://www.kikt.top/tags/spp/">spp</a>
    
    <a href="http://www.kikt.top/tags/sprintboot/">sprintboot</a>
    
    <a href="http://www.kikt.top/tags/swift/">swift</a>
    
    <a href="http://www.kikt.top/tags/tap/">tap</a>
    
    <a href="http://www.kikt.top/tags/thymeleaf/">thymeleaf</a>
    
    <a href="http://www.kikt.top/tags/tips/">tips</a>
    
    <a href="http://www.kikt.top/tags/toast/">toast</a>
    
    <a href="http://www.kikt.top/tags/transition/">transition</a>
    
    <a href="http://www.kikt.top/tags/ui/">ui</a>
    
    <a href="http://www.kikt.top/tags/utf8/">utf8</a>
    
    <a href="http://www.kikt.top/tags/yield/">yield</a>
    
    <a href="http://www.kikt.top/tags/%E4%BA%8C%E8%BF%9B%E5%88%B6/">二进制</a>
    
    <a href="http://www.kikt.top/tags/%E4%BA%A4%E5%8F%89/">交叉</a>
    
    <a href="http://www.kikt.top/tags/%E4%BA%A4%E5%8F%89%E7%BC%96%E8%AF%91/">交叉编译</a>
    
    <a href="http://www.kikt.top/tags/%E4%BB%8B%E7%BB%8D/">介绍</a>
    
    <a href="http://www.kikt.top/tags/%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83/">代码规范</a>
    
    <a href="http://www.kikt.top/tags/%E5%86%B2%E7%AA%81/">冲突</a>
    
    <a href="http://www.kikt.top/tags/%E5%8A%A8%E6%80%81/">动态</a>
    
    <a href="http://www.kikt.top/tags/%E5%8F%91%E5%B8%83/">发布</a>
    
    <a href="http://www.kikt.top/tags/%E5%8F%AF%E6%89%A7%E8%A1%8C/">可执行</a>
    
    <a href="http://www.kikt.top/tags/%E5%9B%BE%E5%BA%8A/">图床</a>
    
    <a href="http://www.kikt.top/tags/%E5%9F%8E%E5%B8%82/">城市</a>
    
    <a href="http://www.kikt.top/tags/%E5%A4%A7%E6%96%87%E4%BB%B6/">大文件</a>
    
    <a href="http://www.kikt.top/tags/%E5%B7%A5%E5%85%B7/">工具</a>
    
    <a href="http://www.kikt.top/tags/%E5%B7%B2%E6%9C%89%E9%A1%B9%E7%9B%AE/">已有项目</a>
    
    <a href="http://www.kikt.top/tags/%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83/">开发环境</a>
    
    <a href="http://www.kikt.top/tags/%E6%80%BB%E7%BB%93/">总结</a>
    
    <a href="http://www.kikt.top/tags/%E6%85%A2/">慢</a>
    
    <a href="http://www.kikt.top/tags/%E6%89%93%E5%8C%85/">打包</a>
    
    <a href="http://www.kikt.top/tags/%E6%89%AB%E7%A0%81/">扫码</a>
    
    <a href="http://www.kikt.top/tags/%E6%8F%92%E4%BB%B6/">插件</a>
    
    <a href="http://www.kikt.top/tags/%E6%96%87%E6%A1%A3/">文档</a>
    
    <a href="http://www.kikt.top/tags/%E6%A8%A1%E6%9D%BF/">模板</a>
    
    <a href="http://www.kikt.top/tags/%E6%B8%B2%E6%9F%93/">渲染</a>
    
    <a href="http://www.kikt.top/tags/%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90/">源码解析</a>
    
    <a href="http://www.kikt.top/tags/%E7%81%B0%E5%BA%A6/">灰度</a>
    
    <a href="http://www.kikt.top/tags/%E7%82%B9%E5%87%BB/">点击</a>
    
    <a href="http://www.kikt.top/tags/%E7%84%A6%E7%82%B9/">焦点</a>
    
    <a href="http://www.kikt.top/tags/%E7%88%AC%E8%99%AB/">爬虫</a>
    
    <a href="http://www.kikt.top/tags/%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86/">状态管理</a>
    
    <a href="http://www.kikt.top/tags/%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BE/">百度地图</a>
    
    <a href="http://www.kikt.top/tags/%E7%BC%96%E7%A0%81/">编码</a>
    
    <a href="http://www.kikt.top/tags/%E7%BC%96%E7%A8%8B%E6%8A%80%E5%B7%A7/">编程技巧</a>
    
    <a href="http://www.kikt.top/tags/%E7%BC%96%E8%AF%91/">编译</a>
    
    <a href="http://www.kikt.top/tags/%E7%BF%BB%E8%AF%91/">翻译</a>
    
    <a href="http://www.kikt.top/tags/%E8%93%9D%E7%89%99/">蓝牙</a>
    
    <a href="http://www.kikt.top/tags/%E8%A1%A8%E5%8D%95/">表单</a>
    
    <a href="http://www.kikt.top/tags/%E8%B7%AF%E7%94%B1/">路由</a>
    
    <a href="http://www.kikt.top/tags/%E8%BF%87%E5%9C%BA%E5%8A%A8%E7%94%BB/">过场动画</a>
    
    <a href="http://www.kikt.top/tags/%E9%9A%90%E7%A7%81/">隐私</a>
    
</div>
    </section>

    
<section class="widget">
    <h3 class="widget-title">友情链接</h3>
    <ul class="widget-list">
        
        <li>
            <a target="_blank" href="https://github.com/Caijinglong" title="我的Github">我的Github</a>
        </li>
        
        <li>
            <a target="_blank" href="https://flutter.dev" title="flutter 官网">flutter 官网</a>
        </li>
        
    </ul>
</section>


    <section class="widget">
        <h3 class="widget-title">其它</h3>
        <ul class="widget-list">
            <li><a href="http://www.kikt.top/index.xml">文章 RSS</a></li>
        </ul>
    </section>
</div>
        </div>
    </div>
</div>
<footer id="footer">
    <div class="container">
        <div>
            <p>如果我的blog对您有帮助,而您愿意捐赠 😆, 可以用下面的二维码</p>
            <img style="width:5rem;" src="https://dev.azure.com/cjlspy/844861b8-ee45-48a3-b430-b974684baaaa/_apis/git/repositories/bf4da1c1-1cfa-4f54-8a75-745cce2b737c/items?versionDescriptor%5Bversion%5D=master&versionDescriptor%5BversionOptions%5D=0&versionDescriptor%5BversionType%5D=0&resolveLfs=true&%24format=octetStream&api-version=5.0&path=%2F20190424141834.png"/>
            <img style="width:5rem; padding-left: 2rem;" 
            src="https://dev.azure.com/cjlspy/844861b8-ee45-48a3-b430-b974684baaaa/_apis/git/repositories/bf4da1c1-1cfa-4f54-8a75-745cce2b737c/items?versionDescriptor%5Bversion%5D=master&versionDescriptor%5BversionOptions%5D=0&versionDescriptor%5BversionType%5D=0&resolveLfs=true&%24format=octetStream&api-version=5.0&path=%2F20190424141931.png"/>
            <img style="width:5rem; padding-left: 2rem;" 
            src="https://dev.azure.com/cjlspy/844861b8-ee45-48a3-b430-b974684baaaa/_apis/git/repositories/bf4da1c1-1cfa-4f54-8a75-745cce2b737c/items?versionDescriptor%5Bversion%5D=master&versionDescriptor%5BversionOptions%5D=0&versionDescriptor%5BversionType%5D=0&resolveLfs=true&%24format=octetStream&api-version=5.0&path=%2F20190424142013.png"/>
        </div>
        &copy; 2018 <a href="http://www.kikt.top">caijinglong的博客 By caijinglong</a>.
        Powered by <a rel="nofollow noreferer noopener" href="https://gohugo.io" target="_blank">Hugo</a>.
        <a href="http://www.flysnow.org/" target="_blank">Theme</a> based on <a href="https://github.com/rujews/maupassant-hugo" target="_blank">maupassant</a>.<br/>
        本站所有内容基于<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" style="color:coral">CC4.0</a>协议发布,需要转载必须署名
        <br/>
        如果有问题可以<a href="mailto:cjl_spy@163.com">email联系我</a>
        <br/>
        京ICP备18038473号-1
        
    </div>
</footer>


    <script type="text/javascript" src="/js/prism.js" async="true"></script>
    <script type="text/javascript">
    
    (function(){
        $("pre code").parent().addClass("line-numbers")
    }())

    window.MathJax = {
        tex2jax: {
            inlineMath: [ ['$','$'] ],
            processEscapes: true
        }
    };
    </script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML' async></script>

<a id="rocket" href="#top"></a>
<script type="text/javascript" src="/js/totop.js?v=0.0.0" async=""></script>



<script type="text/javascript" src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" async></script>




</body>
</html>
